<template>
    <page-header-wrapper :title="false">
      <a-card title="合同内容" :bordered="false">
        <div slot="extra">
          <a-button type="primary" size="small" style="margin-right:10px" ghost>返回</a-button>
          <a-button size="small" type="primary" v-if="detail.contract_status == 20 || detail.contract_status == 10" @click="checkContract(detail.contract_id)">{{statusOpts[detail.contract_status]}} <a-icon type="form" /></a-button>
          <a-button size="small" type="danger" v-else-if="detail.contract_status == 32 || detail.contract_status == 42" @click="checkContract(detail.contract_id)">{{statusOpts[detail.contract_status]}} <a-icon type="exclamation-circle" /></a-button>
          <a-button size="small" type="primary" v-else @click="checkContract(detail.contract_id)" ghost>{{statusOpts[detail.contract_status]}}</a-button>
        </div>
        <a-alert :message="`合同编号：${detail.contract_no}`" :description="`合同金额：${detail.contract_amount}(官费：${detail.contract_official_fee} | 代理费：${detail.contract_agency_fee}) (已打款金额：${detail.contract_amount_paid} | 剩余尾款：${detail.contract_tail_money})`" type="success" :style="{ marginBottom: '20px' }" />
        <a-tabs :tabBarGutter="10" type="card" size="large">
          <a-tab-pane key="1" tab="基本信息">
            <a-card :bordered="false" :loading="loading">
              <a-descriptions :column="5">
                <a-descriptions-item label="创建人">
                  <b>{{detail.username}}</b>
                </a-descriptions-item>
                <a-descriptions-item label="商标名称">
                  <b>{{detail.tm_name}}</b>
                </a-descriptions-item>
                <a-descriptions-item label="客户姓名">
                  <b>{{detail.customer_name}}</b>
                </a-descriptions-item>
                <a-descriptions-item label="联系电话1">
                  <b>{{detail.all_phone1}}</b>
                </a-descriptions-item>
                <a-descriptions-item label="联系电话2">
                  <b>{{detail.all_phone2}}</b>
                </a-descriptions-item>
                <a-descriptions-item label="纸质合同" :span="5">
                  <a v-if="detail.paper_contract_file_url_map != ''" target="_blank" :href="detail.paper_contract_file_url_map">
                    <a-button type="primary">{{detail.paper_contract_file_name}}</a-button>
                  </a>
                </a-descriptions-item>
                <a-descriptions-item label="确认截图" :span="5">
                  <a target="_blank" :href="detail.customer_confirm_map"><img :src="detail.customer_confirm" width="100" /></a>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="2" tab="业务信息">
            <a-card title="已生成的业务" :loading="loading">
              <a-table
                bordered
                :row-key="(record) => record.cb_id"
                :columns="businessColumns"
                :data-source="businessData"
                :pagination="{ pageSize: 10, total: totalCount }"
              >
                <template slot="additional_content" slot-scope="text, record">
                  <span>1、{{record.exts[0].name}} {{record.exts[0].amount}}</span>
                  <a-button type="link" @click="onExtView(record.exts)">查看</a-button>
                </template>
                <template slot="ext_official_fee" slot-scope="text,record">
                  {{record.total_official_fee - record.official_fee}}
                </template>
                <template slot="status1" slot-scope="text">
                  <a-tag>{{text}}</a-tag>
                </template>
              </a-table>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="4" tab="打款信息">
            <a-card title="打款管理" :loading="loading">
              <a-table
                bordered
                :row-key="(record) => record.payment_id"
                :columns="paymentColumns"
                :data-source="paymentData"
              >
                <template slot="receive_account_type" slot-scope="text">
                  {{paymentStatusOpt[text]}}
                </template>
                <template slot="img" slot-scope="text">
                  <a-button type="link" @click="lookImg(text)">查看打款截图</a-button>
                </template>
              </a-table>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="5" tab="地址信息">
            <a-card title="地址管理" :loading="loading">
              <a-table
                bordered
                :row-key="(record) => record.id"
                :columns="addressColumns"
                :data-source="addressData"
              >
              </a-table>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="6" tab="审核历史">
            <a-card title="审核历史" :loading="loading">
              <a-table
                bordered
                :row-key="(record) => record.history_id"
                :columns="checkColumns"
                :data-source="historyData"
              >
              </a-table>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="7" tab="转移记录">
            <a-card title="转移记录" :loading="loading">
              <a-table
                bordered
                :row-key="(record) => record.history_id"
                :columns="transferColumns"
                :data-source="transferData"
              >
              </a-table>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-card>
      <a-modal
        title="编辑合同状态"
        v-model="statusVisible"
        @ok="onCheck"
      >
        <a-form-model
          :model="contractForm"
        >
          <a-form-model-item>
            <a-radio-group v-model="contractForm.status">
              <a-radio v-for="(item,index) in statusRadio" :key="index" :value="index">
                {{item}}
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item>
            <a-textarea v-model="contractForm.notes" placeholder="备注,此外，审核不通过必须填写原因" :rows="4" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <ext-view v-if="extVisible" :ext-list="extList" @cancel="onCancelExt"></ext-view>
    </page-header-wrapper>
</template>

<script>
import {
  getContractDetail,
  getContractBusiness,
  getContractPayment,
  getContractAddress,
  getContractHistory,
  getEditContract,
  postEditContract,
  getContractTransfer
} from '@/api/contract'
  import col from '@/columns/contract'
import ExtView from '@/views/contract/components/ExtView'
  export default {
    name: 'ContractDetail',
    components: { ExtView },
    data () {
      return {
        transferColumns: col.transfer,
        businessColumns: col.selected,
        paymentColumns: col.finance,
        addressColumns: col.address,
        checkColumns: col.check,
        statusVisible: false,
        visible: false,
        loading: false,
        detail: {},
        statusOpts: {},
        queryParams: {},
        businessData: [],
        paymentData: [],
        addressData: [],
        historyData: [],
        paymentStatusOpt: {},
        transferData: {},
        contractForm: {},
        statusRadio: {},
        totalCount: 0,
        extVisible: false,
        extList: []
      }
    },
    activated () {
      this.queryParams['filter[contract_id]'] = this.$route.params.id
      this.getDetail(this.queryParams)
    },
    // computed: {
    //   amount () {
    //     let total = 0
    //     for (const k in this.businessData) {
    //       total += this.businessData[k].offer_section_lft * this.businessData[k].bus_num
    //     }
    //     return total
    //   }
    // },
    methods: {
      checkContract (id) {
        const app = this
        getEditContract(id).then(res => {
          if (res.status === 0) {
            app.statusRadio = res.result.status_items
            app.contractForm = res.result.contract
            app.statusVisible = true
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      },
      onCheck () {
        const app = this
        const data = {}
        data['contract[status]'] = app.contractForm.status
        data['contract[notes]'] = app.contractForm.notes
        if (app.contractForm.status === '32') {
          if (app.contractForm.notes === '') {
            app.$info({
              title: '审核不通过必须填写原因'
            })
            return false
          }
          postEditContract(app.detail.contract_id, data).then(res => {
            if (res.status === 0) {
              app.statusVisible = false
              app.contractForm = {}
              app.getDetail(app.queryParams)
            }
          })
        } else {
          postEditContract(app.detail.contract_id, data).then(res => {
            if (res.status === 0) {
              app.statusVisible = false
              app.contractForm = {}
              app.getDetail(app.queryParams)
            }
          })
        }
      },
      getDetail () {
        const app = this
        const { queryParams } = this
        app.loading = true
        getContractDetail(queryParams['filter[contract_id]']).then(res => {
          if (res.status === 0) {
            app.detail = res.result
            app.statusOpts = res.result.status_opts
            app.queryParams['page_size'] = 100
            getContractBusiness(queryParams).then(res => {
              if (res.status === 0) {
                app.businessData = res.result.data
                app.totalCount = res.result.total_count
              }
            }).finally(() => {
              getContractPayment(queryParams).then(res => {
                if (res.status === 0) {
                  app.paymentData = res.result.data
                  app.paymentStatusOpt = res.result.receive_account_opts
                }
              }).finally(() => {
                getContractAddress(queryParams).then(res => {
                  if (res.status === 0) {
                    app.addressData = res.result.data
                  }
                }).finally(() => {
                  getContractHistory(queryParams).then(res => {
                    if (res.status === 0) {
                      app.historyData = res.result.data
                      app.loading = false
                    }
                  }).finally(() => {
                    getContractTransfer(queryParams).then(res => {
                      if (res.status === 0) {
                        app.transferData = res.result.data
                      }
                    })
                  })
                })
              })
            })
          }
        })
      },
      onExtView (ext) {
        this.extList = ext
        this.extVisible = true
      },
      onCancelExt (visible) {
        this.extVisible = visible
        this.extList = []
      },
      lookImg (src) {
        window.open(src)
      }
    }
  }
</script>

<style scoped>

</style>
